﻿<!DOCTYPE html>
<html lang="zh-Hans" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="frontInclude :: frontHeader"/>
<link rel="stylesheet" th:href="@{/css/team-styles.css?v=v7}" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" th:href="@{/css/style2.css?v=v7}" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" th:href="@{/css/additional-styles.css?v=v7}" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" th:href="@{/css/auto-scroll.css?v=v7}" type="text/css" media="all" charset="utf-8">
<link rel="stylesheet" th:href="@{/css/projects-styles.css?v=v7}" type="text/css" media="all" charset="utf-8">
<!-- 字体图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<body class="wel-body">
<header class="headerbox pcbox" th:replace="frontInclude :: header_menu"></header>

<script>
    if(window.innerWidth<768){
        window['adaptive'].desinWidth = 750;
        window['adaptive'].init();
    }
    $(window).on('resize',function(){
        if(window.innerWidth<768){
            window['adaptive'].desinWidth = 750;
            window['adaptive'].init();
        }
    })
</script>

<style>
    .case-modal{
        min-width: 780px  !important;
        width: auto;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .case-modal .modal-content {
        width: 100%;
        max-width: 900px;
        margin: 20px auto;
    }
    .services2025-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 30px;
        margin: 50px 0;
    }
    .service-card {
        border-radius: 15px;
        padding: 30px;
        color: white;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .service-card[data-service="dt-tech"] {
        background: linear-gradient(135deg, #ed5565 0%, #ff6b7a 100%);
    }

    .service-card[data-service="data-analysis"] {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .service-card[data-service="investment-service"] {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }

    .service-card[data-service="project-packaging"] {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }

    .service-card[data-service="rural-revitalization"] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .service-card[data-service="park-incubation"] {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    .service-card[data-service="media-design"] {
        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        color: #333;
    }

    .service-card[data-service="graphic-design"] {
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        color: #333;
    }
    .service-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    }
    .service-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 100%);
        pointer-events: none;
    }
    .service-card h3 {
        font-size: 24px;
        margin-bottom: 15px;
        font-weight: bold;
        color: white;
    }
    .service-card p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 20px;
    }
    .service-card .btn {
        background: rgba(255,255,255,0.2);
        border: 2px solid rgba(255,255,255,0.3);
        color: white;
        padding: 10px 25px;
        border-radius: 25px;
        text-decoration: none;
        width: 40%;
        transition: all 0.3s ease;
    }
    .service-card .btn:hover {
        background: rgba(255,255,255,0.3);
        border-color: rgba(255,255,255,0.5);
        color: white;
        text-decoration: none;
    }

    .service-card[data-service="media-design"] .btn {
        color: #333;
        background: rgba(0,0,0,0.1);
        border-color: rgba(0,0,0,0.2);
    }

    .service-card[data-service="media-design"] .btn:hover {
        background: rgba(0,0,0,0.2);
        border-color: rgba(0,0,0,0.3);
        color: #333;
    }

    .service-card[data-service="graphic-design"] .btn {
        color: #333;
        background: rgba(0,0,0,0.1);
        border-color: rgba(0,0,0,0.2);
    }

    .service-card[data-service="graphic-design"] .btn:hover {
        background: rgba(0,0,0,0.2);
        border-color: rgba(0,0,0,0.3);
        color: #333;
    }
    .case-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
    }
    .tab-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    .page-btn:hover:not(:disabled) {
        background: #d63447 !important;
        transform: translateY(-2px);
    }
    .page-btn:disabled {
        background: #ccc !important;
        cursor: not-allowed;
    }
    .service-tabs {
        position: sticky;
        top: 80px;
        background: #f8f9fa;
        padding: 20px 0;
        z-index: 10;
        border-radius: 10px;
        margin-bottom: 40px;
    }
    /* 搜索框样式 */
    #searchInput:focus {
        border-color: #e67e22;
        box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1);
    }
    #searchBtn:hover {
        background: #d35400;
        transform: translateY(-50%) scale(1.05);
    }
    #clearSearch:hover {
        color: #e67e22;
    }
    .search-highlight {
        background: #fff3cd;
        padding: 2px 4px;
        border-radius: 3px;
    }
    .no-results {
        text-align: center;
        padding: 50px;
        color: #999;
        font-size: 16px;
    }
    .search-results-info {
        text-align: center;
        margin-bottom: 20px;
        color: #666;
        font-size: 14px;
    }

    @media (max-width: 768px) {
        .case-modal{
            min-width: 700px  !important;
            width: auto;
            max-width: 768px !important;
        }
        .services2025-grid {
            grid-template-columns: 1fr;
            gap: 20px;
            margin: 30px 0;
        }
        .service-card {
            padding: 20px;
        }
        .service-card h3 {
            font-size: 20px;
            color: white;
        }
        .service-tabs {
            position: static;
            padding: 15px 0;
        }
        .tab-item {
            font-size: 12px !important;
            padding: 8px 16px !important;
            margin: 5px 2px;
        }
        .search-container {
            margin: 0 15px 30px 15px !important;
        }
        #searchInput {
            font-size: 14px !important;
            padding: 12px 45px 12px 15px !important;
        }
        #searchBtn {
            width: 35px !important;
            height: 35px !important;
        }
        #clearSearch {
            right: 45px !important;
        }
        #casesGrid {
            grid-template-columns: 1fr !important;
            gap: 15px !important;
        }
        .case-item {
            margin-bottom: 15px;
        }
        .pagination-controls {
            flex-direction: column;
            gap: 15px;
            padding: 20px 10px;
        }
        .page-btn {
            padding: 10px 20px !important;
            font-size: 14px;
            min-width: 120px;
        }
        .page-numbers {
            order: -1;
            justify-content: center !important;
        }
        .page-num-btn {
            width: 40px !important;
            height: 40px !important;
            font-size: 16px !important;
        }
        #pageInfo {
            font-size: 12px;
            margin: 10px 0;
        }
        .cases-section {
            padding: 40px 0 !important;
        }
        .cases-section h3 {
            font-size: 28px !important;
        }
        .case-modal .modal-content {
            margin: 10px auto !important;
            padding: 15px !important;
            max-height: 90vh !important;
            width: calc(100vw - 20px) !important;
            max-width: none !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            position: relative !important;
        }
        .case-modal .modal-content h3 {
            font-size: 18px !important;
            margin-bottom: 15px !important;
            padding-right: 25px !important;
        }
        .case-modal .modal-content img{
            width: 100%;
            align-items: center;
        }
        .case-modal .modal-close {
            top: 8px !important;
            right: 12px !important;
            font-size: 20px !important;
            width: 30px !important;
            height: 30px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .case-modal .modal-content > div:last-child {
            font-size: 14px !important;
            line-height: 1.6 !important;
        }
        #backToTop {
            bottom: 20px !important;
            right: 20px !important;
            width: 45px !important;
            height: 45px !important;
        }
    }

    /* 案例详情模态框样式 */
    .case-modal .modal-content {
        animation: modalSlideIn 0.3s ease-out;
        width: 100%;
    }
    .case-modal .modal-content img{
        width: 100%;
        align-items: center;
    }

    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translateY(-50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 加载动画 */
    .loading {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 50px;
        color: #999;
    }

    .loading::after {
        content: '';
        width: 20px;
        height: 20px;
        border: 2px solid #f3f3f3;
        border-top: 2px solid #ed5565;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-left: 10px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* 页码按钮悬停效果 */
    .page-num-btn:hover:not(.active) {
        background: #e2e8f0 !important;
        transform: scale(1.1);
    }

    /* 活跃页码样式 */
    .page-num-btn.active {
        box-shadow: 0 4px 15px rgba(237, 85, 101, 0.3);
    }

    /* 案例卡片动画 */
    .case-item {
        animation: fadeInUp 0.6s ease-out;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 服务卡片动画 */
    .service-card {
        animation: fadeInScale 0.8s ease-out;
    }

    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* 导航样式 */
    .nav-link:hover {
        background-color: #f8f9fa !important;
        color: #e41e26 !important;
    }

    /* 响应式设计 */
    @media (max-width: 1200px) {
        .nav-sidebar {
            width: 240px;
        }

        .content-with-nav {
            gap: 20px;
        }
    }

    @keyframes autoScroll {
        0% { transform: translateY(0); }
        100% { transform: translateY(-50%); }
    }
    
    .nav-list:hover .nav-list-scroll {
        animation-play-state: paused;
    }
    
    @media (max-width: 768px) {
        .content-with-nav {
            flex-direction: column !important;
            gap: 20px !important;
        }

        .nav-sidebar {
            width: 100% !important;
            position: static !important;
        }
        
        .nav-list {
            height: 120px !important;
        }

        #casesGrid {
            grid-template-columns: 1fr !important;
            gap: 15px !important;
        }
    }
</style>

<div class="mbox" th:replace="frontInclude :: header_menu_mobile"></div>
<div class="con-banner">
    <div class="images pcbox"
         th:style="'background:url('+@{/img/banner3.jpg}+') no-repeat center;background-size: cover;'">
    </div>
    <img img class="mbox h500" th:src="@{/img/banner3.jpg}" alt="走进黑蝎">
    <div class="words">
        <div class="text w1280">
            <div class="tit-en tit-48 secwen">ACHIEVEMENT</div>
            <div class="tit-cn tit-36 secwen add1">成果展示</div>
            <div class="line secwen add2"></div>
        </div>
    </div>
</div>




<!-- 案例展示区域 -->
<div class="cases-section" style="background: #f8f9fa; padding: 80px 0; margin-top: 60px;">
    <div class="w1280">
        <div class="text-center" style="margin-bottom: 50px;">
            <h3 style="font-size: 36px; color: #333; margin-bottom: 20px;">服务案例</h3>
            <p style="color: #666; font-size: 16px;">精选优质案例，展示专业服务实力</p>
        </div>

        <!-- 搜索框 -->
        <div class="search-container" style="display: flex; justify-content: center; margin-bottom: 30px;">
            <div class="search-box" style="position: relative; width: 100%; max-width: 500px;">
                <input type="text" id="searchInput" placeholder="搜索案例标题或内容..." style="width: 100%; padding: 15px 50px 15px 20px; border: 2px solid #e0e0e0; border-radius: 25px; font-size: 16px; outline: none; transition: all 0.3s ease; box-sizing: border-box;">
                <button id="searchBtn" style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: #e67e22; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center;">
                    <i class="fas fa-search" style="color: white; font-size: 16px;"></i>
                </button>
                <button id="clearSearch" style="position: absolute; right: 50px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #999; cursor: pointer; font-size: 18px; display: none; padding: 5px;">&times;</button>
            </div>
        </div>

        <!-- 服务类型切换标签 -->
        <div class="service-tabs" style="display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; gap: 10px;">
            <div class="tab-item active" data-service="project-packaging" style="padding: 12px 24px; background: #e67e22; color: white; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-size: 14px;">项目策划</div>
            <div class="tab-item" data-service="dt-tech" style="padding: 12px 24px; background: #f5f5f5; color: #666; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-size: 14px;">DT数据技术</div>
            <div class="tab-item" data-service="data-analysis" style="padding: 12px 24px; background: #f5f5f5; color: #666; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-size: 14px;">数据采集分析</div>
            <div class="tab-item" data-service="investment-service" style="padding: 12px 24px; background: #f5f5f5; color: #666; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-size: 14px;">精准招商</div>
            <div class="tab-item" data-service="rural-revitalization" style="padding: 12px 24px; background: #f5f5f5; color: #666; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-size: 14px;">乡村振兴 产业规划</div>
            <div class="tab-item" data-service="park-incubation" style="padding: 12px 24px; background: #f5f5f5; color: #666; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-size: 14px;">园区孵化 运营管理</div>
            <div class="tab-item" data-service="media-design" style="padding: 12px 24px; background: #f5f5f5; color: #666; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-size: 14px;">影视传媒</div>
            <div class="tab-item" data-service="graphic-design" style="padding: 12px 24px; background: #f5f5f5; color: #666; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-size: 14px;">平面设计</div>
        </div>

        <!-- 左右分栏布局 -->
        <div class="content-with-nav" style="display: flex; gap: 30px; align-items: stretch;">
            <!-- 左侧文章目录导航 -->
            <div class="nav-sidebar" style="width: 280px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 20px; align-self: flex-start;">
                <div class="nav-title" style="padding: 20px; font-size: 16px; font-weight: 600; color: #333; border-bottom: 1px solid #eee; flex-shrink: 0;">案例目录</div>
                <div class="nav-list" id="articleNav" style="flex: 1; overflow: hidden; position: relative; height: 400px;" onmouseenter="document.getElementById('navListScroll').style.animationPlayState='paused'" onmouseleave="document.getElementById('navListScroll').style.animationPlayState='running'">
                    <div class="nav-list-scroll" id="navListScroll" style="animation: autoScroll 60s linear infinite;">
                        <!-- 文章标题将通过JavaScript动态生成 -->
                    </div>
                </div>
            </div>

            <!-- 右侧案例内容区域 -->
            <div class="content-area" style="flex: 1; min-width: 0; display: flex; flex-direction: column;">
                <div class="cases-content">
                    <div class="cases-grid" id="casesGrid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; margin-bottom: 40px;">
                        <!-- 案例将通过JavaScript动态加载 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    // 案例数据
    const casesData = [[${achievement}]];

    // 分页配置
    let currentService = 'project-packaging';
    let currentPage = 1;
    const itemsPerPage = 6;
    let searchKeyword = '';
    let filteredCases = [];

    // 服务颜色映射
    const serviceColors = {
        'project-packaging': '#e67e22',
        'dt-tech': '#ed5565',
        'data-analysis': '#e74c3c',
        'investment-service': '#c0392b',
        'rural-revitalization': '#f39c12',
        'park-incubation': '#d35400',
        'media-design': '#e74c3c',
        'graphic-design': '#16a085'
    };

    // 显示指定服务的案例
    function showServiceCases(service) {
        currentService = service;
        currentPage = 1;

        // 更新标签状态
        $('.tab-item').each(function() {
            if ($(this).data('service') === service) {
                $(this).css({
                    'background': serviceColors[service],
                    'color': 'white'
                }).addClass('active');
            } else {
                $(this).css({
                    'background': '#f5f5f5',
                    'color': '#666'
                }).removeClass('active');
            }
        });

        // 重新搜索当前服务的案例
        searchCases(searchKeyword);
    }

    // 渲染文章目录导航
    function renderArticleNav() {
        const cases = searchKeyword ? filteredCases : (casesData[currentService] || []);
        const navListScroll = document.getElementById('navListScroll');

        navListScroll.innerHTML = '';

        if (cases.length === 0) {
            const message = searchKeyword ? '没有找到相关文章' : '暂无文章';
            navListScroll.innerHTML = `<div style="padding: 20px; text-align: center; color: #999;">${message}</div>`;
            return;
        }

        // 创建两份相同的列表实现循环滚动
        const createNavItems = (cases) => {
            return cases.map(caseItem => {
                const navItem = document.createElement('div');
                navItem.className = 'nav-item';
                navItem.style.cssText = 'border-bottom: 1px solid #f5f5f5;';

                const navLink = document.createElement('a');
                navLink.href = 'javascript:void(0)';
                navLink.className = 'nav-link';
                navLink.style.cssText = 'display: block; padding: 12px 20px; color: #666; text-decoration: none; font-size: 14px; line-height: 1.4; transition: all 0.3s ease; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;';
                navLink.innerHTML = highlightKeyword(caseItem.articleTitle, searchKeyword);
                navLink.onclick = function() {
                    showCaseDetail(caseItem.articleTitle, caseItem.articleContent);
                };
                navLink.onmouseover = function() {
                    this.style.backgroundColor = '#f8f9fa';
                    this.style.color = '#e41e26';
                };
                navLink.onmouseout = function() {
                    this.style.backgroundColor = '';
                    this.style.color = '#666';
                };

                navItem.appendChild(navLink);
                return navItem;
            });
        };

        // 添加两份相同的列表
        const firstSet = createNavItems(cases);
        const secondSet = createNavItems(cases);

        firstSet.forEach(item => navListScroll.appendChild(item));
        secondSet.forEach(item => navListScroll.appendChild(item));
    }

    // 点击导航跳转到对应文章
    function scrollToArticle(event, element, index) {
        event.preventDefault();
        const targetId = element.getAttribute('href').substring(1);
        const targetElement = document.getElementById(targetId);

        if (targetElement) {
            targetElement.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });

            // 更新导航状态
            updateActiveNav(element);
        }
    }

    // 更新导航激活状态
    function updateActiveNav(activeElement) {
        document.querySelectorAll('.nav-link').forEach(link => {
            link.style.backgroundColor = '';
            link.style.color = '#666';
        });
        activeElement.style.backgroundColor = '#e41e26';
        activeElement.style.color = '#fff';
    }

    // 渲染案例
    function renderCases() {
        const cases = searchKeyword ? filteredCases : (casesData[currentService] || []);
        const casesGrid = $('#casesGrid');

        // 显示加载动画
        casesGrid.html('<div class="loading">加载中...</div>');

        // 模拟加载延迟，增强用户体验
        setTimeout(() => {
            // 清理之前的搜索结果信息
            $('.search-results-info').remove();
            casesGrid.html('');

            // 显示搜索结果信息
            if (searchKeyword) {
                const resultInfo = cases.length > 0 ? 
                    `找到 ${cases.length} 个相关案例` : 
                    '没有找到相关案例';
                casesGrid.before(`<div class="search-results-info">${resultInfo}</div>`);
            }

            if (cases.length === 0) {
                const message = searchKeyword ? 
                    '<div class="no-results">🔍 没有找到匹配的案例<br><small>请尝试使用其他关键词或清空搜索条件</small></div>' : 
                    '<div style="text-align: center; color: #999; padding: 50px;">暂无案例数据</div>';
                casesGrid.html(message);
                return;
            }

            cases.forEach((caseItem, index) => {
                const caseHtml = $(`
			<div class="case-item" id="case-${caseItem.id}" style="background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.1); transition: all 0.3s ease; cursor: pointer; opacity: 0; transform: translateY(30px); scroll-margin-top: 20px;">
				<div class="case-image" style="height: 200px; background: linear-gradient(135deg, ${serviceColors[currentService]}, rgba(255,255,255,0.1)); display: flex; align-items: center; justify-content: center; color: white; position: relative; overflow: hidden;">
					<img src="${caseItem.articleLogo}" alt="${caseItem.articleTitle}" style="width: 100%; height: 100%; object-fit: cover;">
				</div>
				<div class="case-content" style="padding: 25px;">
					<h4 style="font-size: 18px; margin: 0 0 15px 0; font-weight: bold; color: #333;">${highlightKeyword(caseItem.articleTitle, searchKeyword)}</h4>
					<div class="case-time" style="color: #999; font-size: 14px; margin-bottom: 15px;">📅 ${caseItem.createTime || '日期未知'}</div>
					<div class="case-desc" style="color: #666; line-height: 1.6; margin-bottom: 15px;">${highlightKeyword(caseItem.articleDescribe || caseItem.articleSummary || '暂无描述', searchKeyword)}</div>
					<div class="case-more" style="color: ${serviceColors[currentService]}; font-size: 14px; font-weight: bold;">查看详情 →</div>
				</div>
			</div>
		`);

                // 添加点击事件
                caseHtml.on('click', function() {
                    showCaseDetail(caseItem.articleTitle, caseItem.articleContent);
                });

                casesGrid.append(caseHtml);

                // 延迟动画显示
                setTimeout(() => {
                    caseHtml.css({
                        'opacity': '1',
                        'transform': 'translateY(0)'
                    });
                }, index * 100);
            });

            // 渲染完成后重新初始化滚动监听
            setTimeout(() => {
                if (window.initScrollObserver) {
                    window.initScrollObserver();
                }
            }, cases.length * 100 + 200);
        }, 300);
    }

    // 显示案例详情
    function showCaseDetail(title, detail) {
        const isMobile = window.innerWidth <= 768;
        let modal;
        
        if (isMobile) {
            // 移动端全屏显示
            modal = $(`
                <div class="case-modal-mobile" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 9999; overflow-y: auto;">
                    <div class="mobile-header" style="position: sticky; top: 0; background: white; padding: 15px 20px; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; z-index: 10;">
                        <h3 style="color: #333; margin: 0; font-size: 18px; flex: 1; padding-right: 20px;">${title}</h3>
                        <div class="modal-close" style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; border-radius: 50%; cursor: pointer; font-size: 18px; color: #666;">&times;</div>
                    </div>
                    <div class="mobile-content" style="padding: 20px; color: #666; line-height: 1.6; font-size: 15px;">${detail}</div>
                </div>
            `);
        } else {
            // PC端模态框
            modal = $(`
                <div class="case-modal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; display: flex; align-items: center; justify-content: center;">
                    <div class="modal-content" style="background: white; border-radius: 15px; padding: 30px; max-width: 900px; max-height: 80vh; overflow-y: auto; margin: 20px; position: relative;">
                        <div class="modal-close" style="position: absolute; top: 15px; right: 20px; font-size: 24px; cursor: pointer; color: #999;">&times;</div>
                        <h3 style="color: #333; margin-bottom: 20px; padding-right: 30px;">${title}</h3>
                        <div style="color: #666; line-height: 1.8; font-size: 16px;">${detail}</div>
                    </div>
                </div>
            `);
        }

        $('body').append(modal);

        // 关闭模态框
        modal.find('.modal-close').on('click', function() {
            modal.remove();
        });

        if (!isMobile) {
            modal.on('click', function(e) {
                if (e.target === this) {
                    modal.remove();
                }
            });
        }
    }

    // 更新分页显示
    function updatePagination(totalPages) {
        $('#pageInfo').text(`第 ${currentPage} 页，共 ${totalPages} 页`);
        $('#prevPage').prop('disabled', currentPage === 1);
        $('#nextPage').prop('disabled', currentPage === totalPages || totalPages === 0);

        // 生成页码数字
        const pageNumbers = $('#pageNumbers');
        pageNumbers.html('');

        if (totalPages <= 1) return;

        // 显示页码数字（最多显示5个）
        let startPage = Math.max(1, currentPage - 2);
        let endPage = Math.min(totalPages, startPage + 4);

        if (endPage - startPage < 4) {
            startPage = Math.max(1, endPage - 4);
        }

        for (let i = startPage; i <= endPage; i++) {
            const pageBtn = $(`<button class="page-num-btn" data-page="${i}" style="
			width: 35px; height: 35px; border: none; border-radius: 50%;
			cursor: pointer; transition: all 0.3s ease; font-size: 14px;
			${i === currentPage ?
                'background: ' + serviceColors[currentService] + '; color: white;' :
                'background: #f5f5f5; color: #666;'
            }
		">${i}</button>`);

            pageBtn.on('click', function() {
                currentPage = parseInt($(this).data('page'));
                renderCases();
            });

            pageNumbers.append(pageBtn);
        }
    }

    // 搜索功能
    function searchCases(keyword) {
        searchKeyword = keyword.toLowerCase().trim();
        currentPage = 1;
        
        if (searchKeyword !== '') {
            const allCases = casesData[currentService] || [];
            filteredCases = allCases.filter(caseItem => {
                const title = (caseItem.articleTitle || '').toLowerCase();
                const content = (caseItem.articleContent || '').toLowerCase();
                const desc = (caseItem.articleDescribe || caseItem.articleSummary || '').toLowerCase();
                
                return title.includes(searchKeyword) || 
                       content.includes(searchKeyword) || 
                       desc.includes(searchKeyword);
            });
        } else {
            filteredCases = [];
        }
        
        renderCases();
        renderArticleNav();
    }

    // 高亮搜索关键词
    function highlightKeyword(text, keyword) {
        if (!keyword || !text) return text;
        const regex = new RegExp(`(${keyword})`, 'gi');
        return text.replace(regex, '<span class="search-highlight">$1</span>');
    }

    // 页面初始化
    $(document).ready(function() {
        // 搜索功能事件
        $('#searchInput').on('input', function() {
            const keyword = $(this).val();
            if (keyword.trim()) {
                $('#clearSearch').show();
            } else {
                $('#clearSearch').hide();
            }
        });

        $('#searchInput').on('keypress', function(e) {
            if (e.which === 13) { // Enter键
                const keyword = $(this).val();
                searchCases(keyword);
            }
        });

        $('#searchBtn').on('click', function() {
            const keyword = $('#searchInput').val();
            searchCases(keyword);
        });

        $('#clearSearch').on('click', function() {
            $('#searchInput').val('');
            $(this).hide();
            searchCases('');
        });

        // 标签点击事件
        $('.tab-item').on('click', function() {
            const service = $(this).data('service');
            showServiceCases(service);
        });

        // 初始化显示第一个服务的案例
        showServiceCases('project-packaging');

        // 创建Intersection Observer监听文章滚动
        let observer;

        function initScrollObserver() {
            if (observer) {
                observer.disconnect();
            }

            const caseItems = document.querySelectorAll('.case-item');

            if (caseItems.length > 0) {
                observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const caseId = entry.target.id;
                            const correspondingNav = document.querySelector(`a[href="#${caseId}"]`);

                            if (correspondingNav) {
                                updateActiveNav(correspondingNav);
                            }
                        }
                    });
                }, {
                    rootMargin: '-20% 0px -70% 0px',
                    threshold: 0.1
                });

                // 观察所有案例元素
                caseItems.forEach(item => {
                    observer.observe(item);
                });
            }
        }

        // 在渲染完成后初始化滚动监听
        setTimeout(initScrollObserver, 1000);

        // 重新初始化滚动监听的全局函数
        window.initScrollObserver = initScrollObserver;
    });
</script>

<div class="project-dialog-box"></div>
<div th:replace="frontInclude :: footer"></div>
<script th:src="@{/js/animation.js?v=v7}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/main.js?v=v7}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/scroll-effects.js?v=v7}" type="text/javascript" charset="utf-8"></script>
</body>
</html>